import React, { Component } from 'react'
import { View, Text, TextInput, StyleSheet, StatusBar } from 'react-native'
import { connect } from 'react-redux'
import { createForm } from 'rc-form'
import _ from 'lodash'
import { InputItem, Toast } from 'antd-mobile'
import { Button } from '../../components'
import { passwordReg, emailReg, mobileReg, NavigationActions, createAction } from '../../utils'
import { THEME_BACKGROUND, THEME_LABEL, THEME_TEXT } from '../../static/color';

const styles = StyleSheet.create({
  regPage: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    padding: 20,
    backgroundColor: THEME_BACKGROUND
  },
  signupTitle: {
    fontSize: 28,
    fontWeight: '500',
    color: 'white',
    textAlign: 'center',
    marginTop: 32,
    marginBottom: 32
  },
  regInput: {
    marginBottom: 8
  },
  rePassword: {
    marginBottom: 100
  },
  subButton: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8
  },
  subButtonText: {
    color: 'white',
    fontSize: 14
  }
});

@connect(({ app, signUp }) => ({ ...app, signUp }))
class SignUp extends Component {
  state = {
    passwordError: false,
    password: null,
    rePasswordError: false,
    rePassword: null,
    phone: null,
    phoneError: false,
    email: null,
    emailError: false
  }
  changeValue = (value, type) => {
    const newValue = value.replace(/\s/g, '')
    if (type.name === 'phone') {
      if (mobileReg.test(newValue)) {
        this.setState({
          phone: value,
          phoneError: false
        })
      } else {
        this.setState({
          phone: value,
          phoneError: true
        })
      }
    } else if (type.name === 'password') {
      if (passwordReg.test(value)) {
        this.setState({
          password: value,
          passwordError: false
        })
      } else {
        this.setState({
          password: value,
          passwordError: true
        })
      }
    } else if (type.name === 'repassword') {
      if (value === this.state.password) {
        this.setState({
          rePassword: value,
          rePasswordError: false
        })
      } else {
        this.setState({
          rePassword: value,
          rePasswordError: true
        })
      }
    } else if (type.name === 'email') {
      if (emailReg.test(value)) {
        this.setState({
          email: value,
          emailError: false
        })
      } else {
        this.setState({
          email: value,
          emailError: true
        })
      }
    }
  }

  doReg = () => {
    const {
      password,
      rePassword,
      passwordError,
      rePasswordError,
      phoneError,
      email,
      phone
    } = this.state
    const { form, dispatch } = this.props
    const { getFieldValue } = form
    const username = getFieldValue('username')
    if (_.isNil(username) || _.isNil(email) || _.isNil(password) || _.isNil(rePassword) || _.isNil(phone)) {//eslint-disable-line
      return Toast.info('请将你的注册信息填写完整')
    } else if (rePasswordError || phoneError || passwordError) {
      return Toast.info('请矫正你输入的信息')
    }
    dispatch({
      type: 'signUp/SignUp',
      payload: {
        username, password, email, mobilePhoneNumber: phone.replace(/\s/g, '')
      }
    })
    return null
  }

  goLogin = () => {
    const { navigation } = this.props
    return navigation.goBack()
  }

  findAccount = () => {
    const { dispatch } = this.props
    dispatch(NavigationActions.navigate({ routeName: 'ForgetPassword' }))
  }

  render() {
    const { form, dispatch } = this.props
    const { getFieldProps, getFieldValue } = form
    return (
      <View style={styles.regPage}>
        <Text style={styles.signupTitle}>Sign Up</Text>
        <InputItem
          {...getFieldProps('username')}
          type="text"
          placeholder="请输入昵称"
        />
        <InputItem
          {...getFieldProps('email')}
          type="text"
          placeholder="请输入你的邮箱"
          value={this.state.email}
          error={this.state.emailError}
          onChange={value => this.changeValue(value, { name: 'email' })}
        />
        <InputItem
          style={styles.regInput}
          {...getFieldProps('mobilePhoneNumber')}
          type="phone"
          value={this.state.phone}
          error={this.state.phoneError}
          placeholder="请输入你的手机号"
          onChange={value => this.changeValue(value, { name: 'phone' })}
        />
        <InputItem
          style={styles.regInput}
          {...getFieldProps('password')}
          type="password"
          value={this.state.password}
          onChange={value => this.changeValue(value, { name: 'password' })}
          error={this.state.passwordError}
          placeholder="请输入你的密码"
        />
        <InputItem
          style={styles.rePassword}
          {...getFieldProps('repassword')}
          type="password"
          value={this.state.rePassword}
          onChange={value => this.changeValue(value, { name: 'repassword' })}
          error={this.state.rePasswordError}
          placeholder="请再次输入你的密码"
        />
        <Button style={styles.regInput} title="提交" onPress={() => this.doReg()} />
        <View style={styles.subButton}>
          <Text style={styles.subButtonText} onPress={() => this.goLogin()}>已有账号</Text>
          <Text style={styles.subButtonText} onPress={() => this.findAccount()}>找回密码</Text>
        </View>
      </View>
    )
  }
}

export default createForm()(SignUp)
